<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram of a Chain on a Table</title>
</head>
<body>
<canvas id="physicsCanvas" width="650" height="500"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    ctx.lineCap = 'round';

    function drawTable() {
        // Tabletop surface
        ctx.beginPath();
        ctx.moveTo(150, 150);
        ctx.lineTo(550, 150);
        ctx.lineTo(500, 200);
        ctx.lineTo(100, 200);
        ctx.closePath();
        ctx.stroke();

        // Table thickness lines
        ctx.beginPath();
        ctx.moveTo(100, 200);
        ctx.lineTo(100, 220);
        ctx.moveTo(500, 200);
        ctx.lineTo(500, 220);
        ctx.moveTo(550, 150);
        ctx.lineTo(550, 170);
        ctx.moveTo(100, 220);
        ctx.lineTo(500, 220);
        ctx.moveTo(500, 220);
        ctx.lineTo(550, 170);
        ctx.stroke();

        // Table legs (3-sided rectangles)
        const legWidth = 25;
        // Front-left leg
        ctx.beginPath();
        ctx.moveTo(140, 220);
        ctx.lineTo(140, 420);
        ctx.lineTo(115, 420);
        ctx.lineTo(115, 220);
        ctx.stroke();

        // Front-right leg
        ctx.beginPath();
        ctx.moveTo(485, 220);
        ctx.lineTo(485, 420);
        ctx.lineTo(460, 420);
        ctx.lineTo(460, 220);
        ctx.stroke();

        // Back-left leg
        ctx.beginPath();
        ctx.moveTo(165, 170);
        ctx.lineTo(165, 370);
        ctx.lineTo(190, 370);
        ctx.lineTo(190, 170);
        ctx.stroke();

        // Back-right leg
        ctx.beginPath();
        ctx.moveTo(535, 170);
        ctx.lineTo(535, 370);
        ctx.lineTo(510, 370);
        ctx.lineTo(510, 170);
        ctx.stroke();
    }

    function drawChain() {
        const centerX = 325;
        const tabletopY = 175;

        // Coiled chain on the table
        const pile = [
            {x: -15, y: -5, r: 6}, {x: -10, y: 10, r: 5}, {x: 0, y: -12, r: 7},
            {x: 10, y: -8, r: 6}, {x: 18, y: 5, r: 5}, {x: 5, y: 15, r: 4, fill: true},
            {x: -5, y: -2, r: 6, fill: true}, {x: -20, y: 5, r: 5, fill: true},
            {x: 15, y: -15, r: 4, fill: true}, {x: 2, y: 2, r: 8, fill: true},
            {x: -8, y: -15, r: 5}, {x: 20, y: 12, r: 6}
        ];
        pile.forEach(p => {
            ctx.beginPath();
            ctx.arc(centerX + p.x, tabletopY + p.y, p.r, 0, 2 * Math.PI);
            if (p.fill) {
                ctx.fillStyle = 'black';
                ctx.fill();
            } else {
                ctx.stroke();
            }
        });

        // Hanging part of the chain
        const hangStartY = 220; // Start below the table surface
        const linkHeight = 14;
        const linkRadius = 8;
        for (let i = 0; i < 6; i++) {
            ctx.beginPath();
            // Alternate the opening of the links
            if (i % 2 === 0) {
                ctx.arc(centerX, hangStartY + i * linkHeight, linkRadius, Math.PI * 0.4, Math.PI * 1.6, true);
            } else {
                ctx.arc(centerX, hangStartY + i * linkHeight, linkRadius, -Math.PI * 0.6, Math.PI * 0.6, true);
            }
            ctx.stroke();
        }
    }

    function drawDimension() {
        const x = 60;
        const yTop = 220;    // Y-coordinate of table bottom
        const yBottom = 420; // Y-coordinate of floor level
        const midY = (yTop + yBottom) / 2;

        ctx.beginPath();
        // Vertical line
        ctx.moveTo(x, yTop);
        ctx.lineTo(x, yBottom);

        // T-bars at the ends
        ctx.moveTo(x - 10, yTop);
        ctx.lineTo(x + 10, yTop);
        ctx.moveTo(x - 10, yBottom);
        ctx.lineTo(x + 10, yBottom);
        
        // Outward pointing arrows at the ends
        const arrowSize = 10;
        // Top arrow
        ctx.moveTo(x - 5, yTop + arrowSize);
        ctx.lineTo(x, yTop);
        ctx.lineTo(x + 5, yTop + arrowSize);
        // Bottom arrow
        ctx.moveTo(x - 5, yBottom - arrowSize);
        ctx.lineTo(x, yBottom);
        ctx.lineTo(x + 5, yBottom - arrowSize);

        ctx.stroke();

        // Text label
        ctx.fillStyle = 'black';
        ctx.font = '24px sans-serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('1m', x - 35, midY);
    }

    // Draw all components
    drawTable();
    drawChain();
    drawDimension();

</script>
</body>
</html>